<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<title>Class UI.ComboPane</title>
	<link href="../resources/API_Help.css" type="text/css" rel="stylesheet" />
</head>

<body>
<!--打印本页-->
<div class="printCurrentPage">
	<img src="../resources/image/print.gif" align="absmiddle" />&nbsp;
	<a href="ui_ComboPane_API.html" target="_blank">打印本页</a>
</div><br/>

<!--标题说明-->
<h1>Class UI.ComboPane</h1>
<b>定义于文件：</b>&nbsp;&nbsp;webui.js
<div class="description">
	将页面对象渲染成下拉面板控件。<br/>
	注意: 控件的父节点标签的 style 中的 borde 属性会影响到下拉面板的显示位置。
</div><br/>
<b>基本语法</b>
<div class="syntax">var comboPanel = new <b>UI.ComboPane</b>( { &lt; <em>id:String|Tag</em>,&nbsp;&nbsp;<em>name:String</em> &gt; [ , <em>width:Number</em>,&nbsp;&nbsp;<em>editable:boolean</em> ] } );</div>
<b>参数说明</b>
<div class="parameter">
	<ul>
		<li><em>id</em> : String|Tag</li>
		<div class="subDesc">页面下拉面板标签ID或是页面下拉面板标签对象。</div>
		<li><em>name</em> : String</li>
		<div class="subDesc">下拉面板的名字, 提交时, 后台通过下拉面板的名字取得下拉面板的值, 默认值：id。</div>
		<li><em>width</em> : Number</li>
		<div class="subDesc">(可选参数) 下拉面板的宽度, 默认值：160px。</div>
		<li><em>editable</em> : boolean</li>
		<div class="subDesc">(可选参数) 下拉面板的文本框是否可编辑, 默认值：false, 不可编辑。</div>
	</ul>
</div>
<b>页面标签对象原型</b>
<div class="parameter">
	&lt;input type="text" /&gt;
</div>
<b>依赖关系</b>
<div class="parameter">
	<a href="core_API.html">core.js</a>
</div><br/>
<a href="#properties">相关属性</a>&nbsp;&nbsp;-&nbsp;&nbsp;
<a href="#methods">相关方法</a>&nbsp;&nbsp;-&nbsp;&nbsp;
<a href="#events">相关事件</a>&nbsp;&nbsp;-&nbsp;&nbsp;
<a href="#examples">应用示例</a>
<hr>

<!--相关属性-->
<a name="properties"></a>
<h2>相关属性</h2>
<table width="100%" cellspacing="0">
	<tbody>
		<tr>
			<td class="tableHead" width="83%">所有属性</td>
			<td class="tableHead" width="17%">所属类</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#UI.ComboPane.dom" class="methodLink">UI.ComboPane.dom</a>&nbsp;:&nbsp;&lt;div&gt;<br/>
				下拉面板控件的页面标签对象。
			</td><td class="tableLineRight">UI.ComboPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#UI.ComboPane.text" class="methodLink">UI.ComboPane.text</a>&nbsp;:&nbsp;&lt;input&gt;<br/>
				下拉面板控件中的文本框对象。
			</td><td class="tableLineRight alt">UI.ComboPane</td>
		</tr>
	</tbody>
</table>

<!--相关方法-->
<a name="methods"></a>
<h2>相关方法</h2>
<table width="100%" cellspacing="0">
	<tbody>
		<tr>
			<td class="tableHead" width="83%">所有方法</td>
			<td class="tableHead" width="17%">所属类</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#check" class="methodLink">check</a>()&nbsp;:&nbsp;boolean<br/>
				校验下拉面板值的有效性。
			</td><td class="tableLineRight">UI.ComboPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#disable" class="methodLink">disable</a>( <em>disable:boolean</em> )&nbsp;:&nbsp;none<br/>
				设置下拉面板是否可用。
			</td><td class="tableLineRight alt">UI.ComboPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#focus" class="methodLink">focus</a>()&nbsp;:&nbsp;none<br/>
				使下拉面板获得焦点。
			</td><td class="tableLineRight">UI.ComboPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#getValue" class="methodLink">getValue</a>()&nbsp;:&nbsp;String<br/>
				返回下拉面板的值。
			</td><td class="tableLineRight alt">UI.ComboPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#onChange" class="methodLink">onChange</a>( <em>callBack:Function</em> )&nbsp;:&nbsp;none<br/>
				设置下拉面板的动作事件回调。
			</td><td class="tableLineRight">UI.ComboPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#setBtnClass" class="methodLink">setBtnClass</a>(<em>className:String</em>)&nbsp;:&nbsp;none<br/>
				设置下拉按键的样式。
			</td><td class="tableLineRight alt">UI.ComboPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#setCheck" class="methodLink">setCheck</a>( <em>validFunc:Function</em>,&nbsp;&nbsp;<em>format:String</em>,&nbsp;&nbsp;<em>massage:String</em>,&nbsp;&nbsp;<em>outID:String</em> )&nbsp;:&nbsp;none<br/>
				设置下拉面板的校验参数。
			</td><td class="tableLineRight">UI.ComboPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#setPanel" class="methodLink">setPanel</a>( { <em>width:Number</em>,&nbsp;&nbsp;<em>height:Number</em>,&nbsp;&nbsp;<em>panel:Object</em> } )&nbsp;:&nbsp;none<br/>
				设置下拉面板控件的下拉面板。
			</td><td class="tableLineRight alt">UI.ComboPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#setTransform" class="methodLink">setTransform</a>( <em>func:Function</em> )&nbsp;:&nbsp;none<br/>
				设置将下拉面板的值改造成控件的值的方法。
			</td><td class="tableLineRight">UI.ComboPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#setValue" class="methodLink">setValue</a>( <em>value:String</em> )&nbsp;:&nbsp;none<br/>
				设置下拉面板的值。
			</td><td class="tableLineRight alt">UI.ComboPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#setWidth" class="methodLink">setWidth</a>( <em>width:Number</em> )&nbsp;:&nbsp;none<br/>
				设置下拉面板的宽度。
			</td><td class="tableLineRight">UI.ComboPane</td>
		</tr>
	</tbody>
</table>

<!--相关事件-->
<a name="events"></a>
<h2>相关事件</h2>
<table width="100%" cellspacing="0">
	<tbody>
		<tr>
			<td class="tableHead" width="83%">所有事件</td>
			<td class="tableHead" width="17%">所属类</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#UI.ComboPane.onChangeEvent" class="methodLink">UI.ComboPane.onChangeEvent</a>&nbsp;:&nbsp;Function<br/>
				下拉面板控件的值发生变化时的动作事件。
			</td><td class="tableLineRight">UI.ComboPane</td>
		</tr>
	</tbody>
</table>
<br/>

<hr>

<!--相关属性的详细说明-->
<h2>本类属性的详细说明</h2>
<div class="detailWrap">

<a name="UI.ComboPane.dom"></a>
<div class="mdetail">
	<h3>UI.ComboPane.dom</h3><br/>
	<div class="mdetailDetails">
		下拉面板控件的页面标签对象。<br/>
		通过 dom 属性可直接对下拉面板进行操作。
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_ComboPane_API.html">Return</a></div><br/>
</div>

<a name="UI.ComboPane.text"></a>
<div class="mdetail alt">
	<h3>UI.ComboPane.text</h3><br/>
	<div class="mdetailDetails">
		下拉面板控件中的文本框对象。<br/>
		通过 text 对象可直接对下拉面板的文本框进行操作。
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_ComboPane_API.html">Return</a></div><br/>
</div>

</div><br/>

<!--相关方法的详细说明-->
<h2>本类方法的详细说明</h2>
<div class="detailWrap">

<a name="check"></a>
<div class="mdetail">
	<h3>check</h3>
	<div class="functionDefine">public function check()</div>
	<div class="mdetailDetails">
		校验下拉面板值的有效性。
	</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul><li>无</li></ul>
		<b>返回值</b>
		<ul><li>boolean</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_ComboPane_API.html">Return</a></div><br/>
</div>

<a name="disable"></a>
<div class="mdetail alt">
	<h3>disable</h3>
	<div class="functionDefine">public function disable( disable:boolean )</div>
	<div class="mdetailDetails">
		设置下拉面板是否可用。
	</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>disable</em> : boolean</li>
			<div class="subDesc">参数的取值&nbsp;&nbsp;&nbsp;&nbsp;true: 不可用, false: 可用。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_ComboPane_API.html">Return</a></div><br/>
</div>

<a name="focus"></a>
<div class="mdetail">
	<h3>focus</h3>
	<div class="functionDefine">public function focus()</div>
	<div class="mdetailDetails">使下拉面板获得焦点。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul><li>无</li></ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_ComboPane_API.html">Return</a></div><br/>
</div>

<a name="getValue"></a>
<div class="mdetail alt">
	<h3>getValue</h3>
	<div class="functionDefine">public function getValue()</div>
	<div class="mdetailDetails">返回下拉面板的值。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul><li>无</li></ul>
		<b>返回值</b>
		<ul><li>String</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_ComboPane_API.html">Return</a></div><br/>
</div>

<a name="onChange"></a>
<div class="mdetail">
	<h3>onChange</h3>
	<div class="functionDefine">public function onChange( callBack:Function )</div>
	<div class="mdetailDetails">设置下拉面板的 onChangeEvent 动作事件回调。<br/>
	当事件触发时, 系统会自动调用 callBack 方法。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>callBack</em> : Function</li>
			<div class="subDesc">回调函数名。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_ComboPane_API.html">Return</a></div><br/>
</div>

<a name="setBtnClass"></a>
<div class="mdetail alt">
	<h3>setBtnClass</h3>
	<div class="functionDefine">public function setBtnClass( className:String )</div>
	<div class="mdetailDetails">
		设置控件的下拉按键的样式。<br/>
		一般来说, className 可以定义在页面 &lt;style&gt;&lt;/style&gt; 标签中。<br/>
		按键图片样式参见: JSR2.0/common/css/abundant/combo_btn.gif<br/> 
	</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>className</em> : String</li>
			<div class="subDesc">下拉按键的 CSS 样式名。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_ComboPane_API.html">Return</a></div><br/>
</div>

<a name="setCheck"></a>
<div class="mdetail">
	<h3>setCheck</h3>
	<div class="functionDefine">public function setCheck( validFunc:Function, format:String, massage:String, outID:String )</div>
	<div class="mdetailDetails">设置下拉面板的校验参数, 本方法只有在下拉面板为可编辑状态下才有效。<br/>
	注：JSR本身提供的校验方法与文本格式表达式的应用, 请参阅 <a href="valid_API.html">Valid</a> 的API帮助。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>validFunc</em> : Function</li>
			<div class="subDesc">校验下拉面板值的方法。<br/>
			validFunc 可以是JSR本身提供的校验方法, 也可以是自定义的校验方法。<br/>
			自定义的校验方法必须有一个参数和一个 true 或 false的返回值, 校验时, 系统会自动将下拉面板的当前值做为参数调用自定义方法。</div>
			<li><em>format</em> : String</li>
			<div class="subDesc">文本格式表达式。</div>
			<li><em>massage</em> : String</li>
			<div class="subDesc">校验失败的提示信息。</div>
			<li><em>outID</em> : String</li>
			<div class="subDesc">提示信息的页面输入对象ID。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_ComboPane_API.html">Return</a></div><br/>
</div>

<a name="setPanel"></a>
<div class="mdetail alt">
	<h3>setPanel</h3>
	<div class="functionDefine">public function setPanel( { width:Number,  height:Number,  panel:Object } )</div>
	<div class="mdetailDetails">设置下拉面板控件的下拉面板。<br/>
	本方法可以使下拉面板控件与其它控件接合在一起, 实现控件的自定义扩展。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>width</em> : Number</li>
			<div class="subDesc">下拉面板的宽度, 默认值: 160px。</div>
			<li><em>height</em> : Number</li>
			<div class="subDesc">下拉面板的高度, 默认值: 100px。</div>
			<li><em>panel</em> : Object</li>
			<div class="subDesc">控件对象。<br/>
			在扩展 UI.ComboPane 时, 对 panel 对象有以下要求: <br/>
			&nbsp;&nbsp;&nbsp;1) panel 必须有 dom 属性, 并且 dom 属性为 panel 的容器标签;<br/>
			&nbsp;&nbsp;&nbsp;2) panel 必须有 autoSize 方法, 这个方法是用来让 panel 自动适应父节点尺寸的;<br/>
			&nbsp;&nbsp;&nbsp;3) paenl 必须有 onChange 方法, UI.ComboPane 将通过此方法与 panel 交互;<br/>
			</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_ComboPane_API.html">Return</a></div><br/>
</div>

<a name="setTransform"></a>
<div class="mdetail">
	<h3>setTransform</h3>
	<div class="functionDefine">public function setTransform( func:Function )</div>
	<div class="mdetailDetails">设置将下拉面板的值改造成控件的值的方法。<br/>
	在对 UI.ComboPane 扩展以后, 下拉面板的取值往往不是我们最终需要的体现形式, <br/>
	例如: 下拉面板为一个滑动条, 下拉面板的取值为: 725, 而我们需要的数据体现形式为: 12:05<br/>
	因此, 可以使用本方法指定一个数据形式的转换方法。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>func</em> : Function</li>
			<div class="subDesc">转换方法名, func 必须有一个参数。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_ComboPane_API.html">Return</a></div><br/>
</div>

<a name="setValue"></a>
<div class="mdetail alt">
	<h3>setValue</h3>
	<div class="functionDefine">public function setValue( value:String )</div>
	<div class="mdetailDetails">设置下拉面板的值。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>value</em> : String</li>
			<div class="subDesc">字符串文本。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_ComboPane_API.html">Return</a></div><br/>
</div>

<a name="setWidth"></a>
<div class="mdetail">
	<h3>setWidth</h3>
	<div class="functionDefine">public function setWidth( width:Number )</div>
	<div class="mdetailDetails">设置下拉面板的宽度。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>width</em> : Number</li>
			<div class="subDesc">下拉面板的宽度, 默认值: 160px。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_ComboPane_API.html">Return</a></div><br/>
</div>

</div><br/>

<!--相关事件的详细说明-->
<h2>本类事件的详细说明</h2>
<div class="detailWrap">

<a name="UI.ComboPane.onChangeEvent"></a>
<div class="mdetail">
	<h3>UI.ComboPane.onChangeEvent</h3><br/>
	<div class="mdetailDetails">
		下拉面板控件的值发生变化时的动作事件。<br/>
		在改变下拉面板的值的时候, 将会触发此事件, 具体的应用请参见方法 <a href="#onChange" class="methodLink">onChange</a> 的说明。
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_ComboPane_API.html">Return</a></div><br/>
</div>

</div><br/>

<!--应用示例-->
<a name="examples"></a>
<h2>应用示例</h2>
<div class="properties"><a href="../Example/ui_ComboPane.html" target="_blank">ui_ComboPane.html</a></div><br/>

<!--页脚-->
<hr>
<div class="footer">JSR - Copyright &copy; 2007-2008 Jsr JS, LLC<br/>All rights reserved.</div>
</body>
</html>
